<template>
  <!-- 风险排名饼图 -->
  <div class="mngRiskChartPage">
    <div class="chartBox" :id="`mngRisk-${idName}-ChartId`"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import echarts from "@/common/utils/echarts.js";
import {getManageBoardRisk} from "@/api/dashboard/manageBoard";

const props = defineProps({
  idName: {
    type: String,
    required: true, //必传属性
  }
});

const riskChartRef = ref(null);
const colorsArr = ref(["#1978E5", "#05CFF7", "#C8C55B", "#60B45E", "#A7B0B3"]);
const options = reactive({
  angleAxis: {
    show: 0,
    clockwise: false,
    max: 0,
  },
  radiusAxis: {
    type: "category",
    data: [],
    z: 10,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      color: "#fff",
      align: "left",
      margin: -10,
    },
  },
  polar: {
    show: 0,
    center: ["50%", "50%"],
  },
  series: [
    {
      type: "bar",
      data: [],
      label: {
        show: true,
        position: "top",
      },
      barWidth: 10,
      coordinateSystem: "polar",
    },
  ],
});

// 请求接口数据
const initRiskChartData =async (pageType) => {
  const {data,httpStatusCode} = await getManageBoardRisk();
  if(httpStatusCode === 200){
    const res = data.records.filter(item=>item.year===(new Date().getFullYear()+''))
    // console.log(res, '77777788888888');
  }
  if (pageType === 'left') { // 左侧接口
    // console.log(1);
  } else { // 右侧接口
    // console.log(2);
  }
  let getDataArr = [
    { name: "风险1", value: 70 },
    { name: "风险2", value: 90 },
    { name: "风险3", value: 110 },
    { name: "风险4", value: 130 },
    { name: "风险5", value: 150 },
  ];
  let maxVal = Math.max(...getDataArr.map((item) => item.value));
  options.angleAxis.max = maxVal + maxVal / 3;
  let sumVal = eval(getDataArr.map((item) => item.value).join("+"));

  options.radiusAxis.data = getDataArr.map((item) => {
    return (
      item.name + ":" + "　" + ((item.value / sumVal) * 100).toFixed() + "%"
    );
  });
  options.series[0].data = getDataArr.map((item, index) => {
    return {
      value: item.value,
      name: item.name,
      itemStyle: {
        color: colorsArr.value[index],
      },
    };
  });
  riskChartRef.value.setOption(options);
};
// 在父组件中调用
const initRiskChart = (type) => {
  if (!riskChartRef.value) {
    riskChartRef.value = echarts.init(
      document.getElementById(`mngRisk-${props.idName}-ChartId`)
    );
    riskChartRef.value.setOption(options);
  }
  initRiskChartData(type);
  return riskChartRef.value
};
defineExpose({
  initRiskChart,
});
</script>

<style lang="scss" scoped>
.mngRiskChartPage {
  width: 100%;
  height: 100%;
  .chartBox {
    width: 100%;
    height: 100%;
  }
}
</style>
